<template>
    <div>
        <div class="big-data-container">
            <div class="header"><span>运输单位最近30天趟次</span></div>
            <div class="chart-body">
                <div class="top-tab">
                    <div class="tab-item">
                        <span class="title-text">总趟次</span>
                        <span class="number-text">{{chartData.cnt}}</span>
                    </div>
                    <div class="tab-item" style="margin-left: 20px;" v-show="false">
                        <span class="title-text">已处理数</span>
                        <span class="number-text">1865</span>
                    </div>
                </div>
                <div class="chart-view" id="rightChart1"></div>
            </div>
        </div>
    </div>
</template>

<script>
import {boardQueryRecentTripCnt} from '../../api/board'

const echarts = require('echarts')
export default {
    name: 'rightChart1',
    data(){
        return{
            chart:null,
            chartData:{
                cnt:0
            },
        }
    },
    methods:{
        initChart(){
            this.chart = echarts.init(document.getElementById('rightChart1'))

            const option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    },
                    confine:true
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisLabel:{
                        textStyle:{
                            color: '#9AA4A6'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#9AA4A6'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        axisLabel:{
                            textStyle:{
                                color: '#9AA4A6'
                            }
                        },
                        axisLine:{
                            show: false,
                            lineStyle:{
                                color:'#9AA4A6'
                            }
                        },
                        splitLine:{
                            show:false,
                            lineStyle:{
                                type:'dashed',
                                color:'#9AA4A6',
                                width: 1
                            }
                        }
                    },
                    {
                        name:'单位:万T',
                        nameTextStyle:{
                            color: '#9AA4A6',
                            padding:[0,0,0,-40]
                        },
                        position:'right',
                        axisLabel:{
                            show:false,
                        },
                        axisTick:{
                            show:false,
                        },
                        axisLine:{
                            show:false,
                        }
                    }
                ],
                series: [
                    {
                        name: '运输单位最近30天趟次',
                        type: 'line',
                        itemStyle: {
                            color: 'rgba(224, 170, 3,1)'

                        },
                        smooth:true,
                        showSymbol:false,
                        lineStyle:{
                            width:1,
                        },
                        color: 'rgba(224, 170, 3,1)', //线条颜色
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(224, 170, 3,0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(224, 170, 3,0)'
                                }
                            ]),
                            global: false // 缺省为 false
                        },
                        data: []
                    }
                ]
            }
            this.chart.setOption(option)
        },
        getData(){
            const param = {}
            boardQueryRecentTripCnt(param).then(response =>{
                this.chartData = response.data.data
                this.setChartData(response.data.data)
            }).catch(error => {
                console.log(error)
            })
        },
        setChartData(chartData){
            const countData = []
            const dateData = []
            for (let item of chartData.rows){
                countData.push(item.cnt)
                dateData.push(item.dateStr)
            }
            this.chart.setOption({
                xAxis:{
                    data:dateData
                },
                series:[
                    {
                        data:countData
                    }
                ]
            })
        }
    },
    mounted () {
        this.initChart()
        this.getData()
    }
}
</script>

<style scoped lang="scss">
.big-data-container{
    width: 394px;
    height: 300px;
    background: url("/static/img/left_chart_2_bg.png") no-repeat;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    .header{
        width: 367px;
        height: 46px;
        background: url("/static/img/chart_header.png") no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        span{
            color: #FFFFFF;
            font-size: 15px;
            margin-left: 26px;
            margin-top: 5px;
        }
    }
    .chart-body{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .top-tab{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            .tab-item{
                width: 132px;
                height: 33px;
                background: url("/static/img/tab_item_bg.png") no-repeat;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .title-text{
                    font-size: 15px;
                    font-weight: bolder;
                    color: #FEE400;
                }
                .number-text{
                    font-size: 15px;
                    font-weight: bolder;
                    color: #21CAFF;
                    margin-left: 5px;
                }
            }
        }

        .chart-view{
            width: 100%;
            height: 100%;
        }

    }
}
</style>
